<template>
  <!-- 子组件必须添加 v-bind="$attrs",  通过父传孙的方式传递给 antd 的原生组件中 -->
  <BasicDrawer v-bind="$attrs" @register="register" title="简单抽屉" width="30%">


    <!-- 按钮关闭，直接绑定 useDrawerInner 暴露的 closeDrawer 方法 -->
    <a-button type="primary" @click="closeDrawer" class="mr-2"> 按钮关闭 </a-button>
    <!-- 代码关闭, 包装一层方法: 需要注意的时，通过调用 closeDrawer 方法关闭不会回调 @close 方法   -->
    <label @click="doClose">点我关闭</label>
  </BasicDrawer>
</template>
<script lang="ts" setup>
  // BasicModal 和 useModalInner 为 vben 基于 ant Modal 封装的组件
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';

  // register 绑定组件, closeModal: 关闭弹窗, setModalProps: 设置窗口参数
  const [register, { closeDrawer }] = useDrawerInner();

  function doClose() {
    // 手动调用关闭弹窗方法
    closeDrawer();
  }
</script>
